<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-button size="mini" type="primary" @click="save()" icon="el-icon-notebook-2">保存配置</el-button>
		</el-header>
		<el-main>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="基础信息" name="baseInfo">
					<baseInfo ref="baseInfo" @getData="getData" />
				</el-tab-pane>
				<el-tab-pane label="委托人信息" name="consignerInfo">
					<consignerInfo ref="consignerInfo" @getData="getData" />
				</el-tab-pane>
				<el-tab-pane label="重要日期信息" name="dateInfo">
					<dateInfo ref="dateInfo" @getData="getData" />
				</el-tab-pane>
				<el-tab-pane label="基金文件信息" name="fundFileInfo">
					<fundFileInfo ref="fundFileInfo" @getData="getData" />
				</el-tab-pane>
				<el-tab-pane label="投资相关信息" name="investInfo">
					<investInfo ref="investInfo" @getData="getData" />
				</el-tab-pane>
				<el-tab-pane label="机构信息" name="organInfo">
					<organInfo ref="organInfo" @getData="getData" />
				</el-tab-pane>
				<el-tab-pane label="费率信息" name="rateInfo">
					<rateInfo ref="rateInfo" @getData="getData" />
				</el-tab-pane>
				<el-tab-pane label="风控信息" name="riskInfo">
					<riskInfo ref="riskInfo" @getData="getData" />
				</el-tab-pane>
			</el-tabs>
		</el-main>
	</el-container>
</template>
<script>
import { getHoverMsg } from '@/api/productApi/file'
import baseInfo from './components/baseInfo'
import consignerInfo from './components/consignerInfo'
import dateInfo from './components/dateInfo'
import fundFileInfo from './components/fundFileInfo'
import investInfo from './components/investInfo'
import organInfo from './components/organInfo'
import rateInfo from './components/rateInfo'
import riskInfo from './components/riskInfo'
import { editHoverMsg } from '@/api/productApi/file'
export default {
	name: 'PropertyPrompt',

	components: {
		baseInfo,
		consignerInfo,
		dateInfo,
		fundFileInfo,
		investInfo,
		riskInfo,
		organInfo,
		rateInfo
	},
	data() {
		return {
			activeName: 'baseInfo',
			hoverInfoFlag: '',
			refList: [
				{ key: 'baseInfo', value: '基础信息' },
				{ key: 'consignerInfo', value: '委托人信息' },
				{ key: 'dateInfo', value: '重要日期信息' },
				{ key: 'investInfo', value: '投资相关信息' },
				{ key: 'fundFileInfo', value: '基金文件信息' },
				{ key: 'organInfo', value: '机构信息' },
				{ key: 'riskInfo', value: '风控信息' },
				{ key: 'rateInfo', value: '费率信息' }
			]
		}
	},
	async mounted() {
		await this.$store.dispatch('fundStep/setHover')
		this.getData()
	},
	methods: {
		handleClick(tab, event) {},

		getData() {
			getHoverMsg({}).then(res => {
				if (res.msgCode === 'Y') {
					this.hoverInfoFlag = res.data.body.hoverInfoFlag
					for (const i in res.data.body) {
						if (i !== 'hoverInfoFlag') {
							if (
								!res.data.body[i] ||
								Object.prototype.toString
									.call(res.data.body[i])
									.substring(8, Object.prototype.toString.call(res.data.body[i]).length - 1) !== 'Object'
							) {
								res.data.body[i] = {}
							}
						}
					}
					this.editList(res.data.body)
				}
			})
		},

		editList(data) {
			setTimeout(() => {
				this.refList.forEach(item => {
					this.$refs[item.key].edit(data[item.key])
				})
			})
		},

		save() {
			this.operatorComfirm(() => {
				let obj = {}
				this.refList.forEach(item => {
					obj = { ...obj, [item.key]: this.$refs[item.key].saveSetings() }
				})
				obj.hoverInfoFlag = this.hoverInfoFlag
				editHoverMsg(obj).then(res => {
					if (res.msgCode === 'Y') {
						this.$message({ type: 'success', message: res.msg })
						this.getData()
						this.$store.dispatch('fundStep/setHover')
					}
				})
			}, `保存提醒配置`)
		}
	}
}
</script>
<style lang="scss" scoped >
.el-footer {
	background-color: #b3c0d1;
	color: #333;
	text-align: center;
}

.el-header {
	background-color: white;
	color: #333;
	text-align: center;
	margin-bottom: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.el-main {
	background-color: white;
	color: #333;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
::v-deep .text {
	font-size: 14px;
}
::v-deep .hoverdivClass {
	width: 48%;
}
::v-deep .item {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
}

::v-deep .box-card {
	width: 100%;
}
</style>
